<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-05-26 08:09:20
 * @LastEditors: cxguo
 * @LastEditTime: 2020-05-30 08:17:30
-->
<template>
  <div>
    <div id="chart_container" />
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  name: 'ReportSaleDetailByGoodsChart',
  props: {
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    // const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    // const yData = [200, 192, 120, 144, 160, 130, 140]
    // this.initChart({ xData, yData, title: '销售额' })
  },
  methods: {
    getChartInstance() {
      const el = document.getElementById('chart_container')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(el, 'macarons')
      return myChart
    },
    initChart({ xData, yData, title }) {
      const myChart = this.getChartInstance()
      // 绘制图表
      myChart.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        xAxis: {
          axisTick: {
            show: false
          },
          boundaryGap: false,
          data: xData
        },
        yAxis: { type: 'value' },
        legend: {
          data: [title]
        },
        series: [{
          name: title,
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: yData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }]
      })
    }
  }
}
</script>

<style scoped>
    #chart_container{
        width: 100%;
        height:400px;
    }
</style>
